{% extends "base.html" %}

{% block title %}Register - Volunteer Platform{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-box">
        <h2>Register</h2>
        <form method="POST" action="{{ url_for('register') }}" class="auth-form">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label for="confirm_password">Confirm Password</label>
                <input type="password" id="confirm_password" name="confirm_password" required>
            </div>
            <div class="form-group">
                <label for="user_type">Account Type</label>
                <select id="user_type" name="user_type" required>
                    <option value="volunteer">Volunteer</option>
                    <option value="charity">Charity Organization</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Register</button>
        </form>
        <div class="auth-links">
            <p>Already have an account? <a href="{{ url_for('login') }}">Login Now</a></p>
        </div>
    </div>
</div>

<script>
document.querySelector('.auth-form').addEventListener('submit', function(e) {
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    
    if (password !== confirmPassword) {
        e.preventDefault();
        alert('Passwords do not match!');
    }
});
</script>
{% endblock %} 